<template>
  <div class>
    <div class="tabs-section" v-if="!hideNav">
      <Tabs :animated="false" :value="active" @on-click="changeRoute">
        <TabPane label="工资表模板" name="template">
          <router-view></router-view>
        </TabPane>
        <TabPane label="最低工资" name="lowest">
          <router-view></router-view>
        </TabPane>
        <TabPane label="企业设置" name="individuation">
          <router-view></router-view>
        </TabPane>
        <TabPane label="操作记录" name="log">
          <router-view></router-view>
        </TabPane>
      </Tabs>
    </div>
    <div class="setttings-structrue" v-if="hideNav">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: "template"
    };
  },

  methods: {
    changeRoute(e) {
      console.log(e);
      this.active = e;
      let route = "/payroll/salary/settings/" + e;
      this.$router.push(route);
    }
  },
  computed: {
    hideNav() {
      //隐藏tabs
      let route = this.$route.matched;
      let matched = route[route.length - 1].path;
      return (
        matched.includes("structure") ||
        matched.includes("template/detail") ||
        matched.includes("lowest/add") ||
        matched.includes("lowest/detail") ||
        matched.includes("lowest/history")
      );
    }
  }
};
</script>
<style lang="scss" scoped src='./index.scss'>
</style>